<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <b class="line"></b>
    <div class="clear"></div>
    <div class="center" style="margin-top:0px">
      <div class="col-main">
        <div class="main-wrap">
          <!--标题 -->
          <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">积分管理</strong> / <small>Account&nbsp;Integral</small></div>
          </div>
          <hr />
          <div class="finance">
            <div class="financeText">
              <p>积分:<span>{{account.integral}}</span></p>
              <el-button type="primary" style="color:white;padding:5px 10px" @click="dialogVisible = true">积分充值</el-button>
              <!-- <a href="safety.html">安全中心：保护账户资产安全</a> -->

              <el-dialog title="积分充值" :visible.sync="dialogVisible" width="30%">
                <span>
                  选择积分充值数量：
                  <el-radio v-model="num" :label="100">100</el-radio>
                  <el-radio v-model="num" :label="500">500</el-radio>
                  <el-radio v-model="num" :label="1000">1000</el-radio>
                  <el-radio v-model="num" :label="5000">5000</el-radio>
                </span>
                <br>
                <span style="margin-top:10px;display:block">
                  输入支付密码：<el-input type="password" style="width:200px" v-model="paypwd" placeholder="请输入支付密码"></el-input>
                </span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false" style="padding:5px 10px">取 消</el-button>
                  <el-button type="primary" @click="integralRecharge" style="padding:5px 10px">确 定</el-button>
                </span>
              </el-dialog>
            </div>

            <div class="financeText">
              <p>积分变动明细:</p>
              <!-- <a href="safety.html">安全中心：保护账户资产安全</a> -->
            </div>
            <div class="walletList">
              <div class="walletTitle">
                <li class="time">创建时间</li>
                <li class="name">详情</li>
                <li class="amount">积分变动</li>
                <li class="balance">剩余积分</li>
              </div>
              <div class="clear"></div>
              <div class="walletCont">
                <li class="cost" v-for="log in logs">
                  <div class="time">
                    <p v-text="dateFormatter(log.createTime)">
                    </p>
                    <!-- <p class="text-muted"> 18:41
                    </p> -->
                  </div>
                  <div class="title name">
                    <p class="content">
                      {{log.comment}}
                    </p>
                  </div>

                  <div class="amount">
                    <span class="amount-pay" v-if="log.modType==2">-{{log.integral}}</span>
                    <span class="amount-pay" v-if="log.modType==1">+{{log.integral}}</span>
                  </div>
                  <div class="balance">
                    <span></span><em>{{log.afterIntegral}}</em>
                  </div>
                </li>

              </div>

              <!--分页-->
              <ul class="am-pagination am-pagination-right">
                <el-pagination background layout="prev, pager, next" v-bind:total="total" :current-page.sync="page" v-on:current-change="qryList()">
                </el-pagination>
              </ul>

            </div>

          </div>
        </div>
        <!--底部-->
        <foot></foot>
      </div>
      <leftmenu></leftmenu>
    </div>
    <navfull></navfull>
    <form action="http://localhost:8000/trade/aliPayPage" method="get" id="pay_form" style="display:none">
      <input type="text" name="orderId" v-model="payId" />
      <input type="text" name="totalAmount" v-model="price" />
      <input type="text" name="subject" value="积分充值" />
      <input type="text" name="type" value="2"/>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'integral',
  data () {
    return {
      total: 0,
      page: 1,
      logs: [],
      account: {},
      dialogVisible: false,
      num: 100,
      paypwd: "",
      payId:"",
      price:0
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.qryList();
    this.qryAccount();
  },
  methods: {
    qryAccount () {
      this.axios.get("/user/account/account").then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.account = result.data;
        }
      })
    },
    qryList () {
      this.axios.get("/user/account/logs", {
        params: {
          page: this.page,
          pageSize: 10,
          logType: 2
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.total = result.total;
          this.logs = result.data;
        } else {

        }
      })
    },
    integralRecharge () {
      this.axios.post("/user/account/integral/recharge", {
        payPwd: this.$md5(this.paypwd),
        integral: this.num
      }).then((res) => {
        let result = res.data;
        if (result.code == 200) {
          this.dialogVisible = true;
          this.payId = result.data;
          this.price = this.num/10;
          this.$nextTick(() => {
            var form = document.getElementById('pay_form');
            form.submit();
          })
        } else {
          this.$layer.msg(result.msg);
        }
      })
    },
    dateFormatter (date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    },
  }
}
function add0 (m) {
  return m < 10 ? '0' + m : m
}
</script>

<style scoped>
@import "../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../assets/css/personal.css";
@import "../../../assets/css/wallet.css";
</style>